<template>
<div>
    <div class="head_img hidden-md hidden-sm hidden-xs"></div>
    <img class="head_phone_img hidden-lg" src="../../assets/hghotel_image/banner05.jpg" alt="">
    <div class="container">
        <div class="row">
            <div class="col-md-12 zxyd hidden-xs hidden-sm">
                <span class="zxyd_left"></span> 在线预订 <span class="zxyd_right"></span>
            </div>
            <div class="row hidden-md hidden-lg" style="font-weight:bolder;font-size:16px;line-height:20px;text-align:center;padding:20px 0px;margin:0 10px;">
                <div class="col-xs-4 zxyd_left"></div >
                <div class="col-xs-4">在线预订</div >
                <div class="col-xs-4 zxyd_right"></div>
            </div>
            <div class="col-md-12 zysx">
                <p style="color:#8f4290;font-size:15px;">预订客房注意事项:</p>
                <p>• 预订酒店后如24小时未有回复,请主动和酒店前台或销售联系。</p>
                <p>• 未标为必填的项目,其填写一定要保证其真实性,以便我们更及时周到的为您服务。</p>
            </div>
            <div class="col-md-12">
                <form style="text-align:left">
                    <div class=" col-md-6  form-group ">
                        <label>住客姓名:<span style="color:red">*</span></label>
                        <input type="email" class="form-control">
                    </div>
                    <div class=" col-md-6 form-group">
                        <label>性别:<span style="color:red">*</span></label>
                        <div class="radio">
                            <label id="nan">
                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                                <span>男</span>
                            </label>
                            <label id="nv">
                                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                <span>女</span>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6 form-group">
                        <label for="">入住时间:<span style="color:red">*</span></label>
                        <date-picker  class="dp" :date="startTime" :option="option"></date-picker>
                    </div>
                    <div class="col-md-6 form-group">
                        <label for="">退房时间:<span style="color:red">*</span></label>
                        <date-picker class="dp" :date="endTime" :option="option"></date-picker>
                    </div>
                    <div class="col-md-6 form-group">
                        <label for="">联系电话:<span style="color:red">*</span></label>
                        <input type="text" class="form-control" id="" placeholder="">
                    </div>
                    <div class="col-md-6 form-group">
                        <label for="">电子邮箱:*</label>
                        <input type="text" class="form-control" id="" placeholder="">
                    </div>
                    <div class="col-md-6 form-group">
                        <label for="">房间类型:<span style="color:red">*</span></label>
                        <select id="xlk" class="form-control" style="position:relative">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                        <!-- <img class="hidden-xs" @click="xl" src="../../assets/hghotel_image/xlsj.png" alt="" style="position:absolute;right:18px;top:37px"> -->
                    </div>
                    <div class="col-md-6 form-group">
                        <label for="">宽带:</label>
                        <div class="checkbox">
                            <label id="kd_wrap">
                                <input id="kd" type="checkbox" value="">
                                <span>尽量安排宽带</span>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6 form-group">
                        <label for="">其他要求:<span style="color:red">*</span></label>
                        <input type="text" class="form-control" id="" placeholder="">
                    </div>
                    <div class="col-md-6 hidden-xs hidden-sm form-group" style="height:74px;">
                    </div>
                    <div class="col-md-6 col-xs-6 form-group">
                        <button id="btn_left" style="background:#8f4290;color:#ffffff;border:0px" type="submit" class="col-md-6 col-md-offset-6 btn btn-default">提交预订</button>
                    </div>
                    <div class="col-md-6 col-xs-6 col-sm-6 form-group">
                        <button id="btn_right" style="background:#8f4290;color:#ffffff;border:0px" type="submit" class="col-md-6 col-md-offset-0 btn btn-default">重写预订</button>
                    </div>
                </form>
            </div>
            <div class="col-md-12 bzxx">
                <p>备注信息:</p>
                <ul>
                    <li>1、带*号的项目必须填。</li>
                    <li>2、本酒店接受各种主要信用卡。 </li>
                    <li>3、以上房价如有更改，恕不另行通知。</li>
                    <li>4、十二岁以下儿童与父母同宿不占床位者免费。</li>
                    <li>5、除有特别保证外，所有预订保留至当日下午六时。</li>
                    <li>6、退房时间为下午一时，下午六时前退房另加收半天房租，下午六点后另加收全天房租。</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import myDatepicker from 'vue-datepicker/vue-datepicker-es6.vue'
export default {
  components: {
      'date-picker': myDatepicker
  },
  data(){
      return{
          startTime: {
            time: ''
        },
        endTime: {
            time: ''
        },
        option: {
            type: 'day',
            week: ['一', '二', '三', '四', '五', '六', '日'],
            month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            format: 'YYYY-MM-DD',
            inputStyle: {
                'border': '0',
                'width': '100%',
                'background': '#eeeeee',
                'display': 'block',
                'width': '100%',
                'height': '34px',
                'padding': '6px 12px',
                'font-size': '14px',
                'line-height': '1.42857143',
                'color': '#555',
                'background-image': 'none',
                'border': '1px solid #ccc',
                'border-radius': '4px',
                '-webkit-box-shadow': 'inset 0 1px 1px rgba(0,0,0,.075)',
                'box-shadow': 'inset 0 1px 1px rgba(0,0,0,.075)',
                '-webkit-transition': 'border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s',
                'transition': 'border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s',
                'transition': 'border-color ease-in-out .15s,box-shadow ease-in-out .15s',
                'transition': 'border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s',
            },
            color: {
            header: 'rgb(188, 142, 188)',
            headerText: '#fff'
            },
            buttons: {
            ok: '确定',
            cancel: '取消'
            },
            overlayOpacity: 0.5, // 0.5 as default
            dismissible: true // as true as default
        },
      }
  },
  methods:{
      xl(){
          console.log($('#xlk'))
      }
  },
  mounted(){
    
  }
}
</script>
<style scoped>
    .head_img{
        width:100%;
        height: 410px;
        background:url('../../assets/hghotel_image/banner05.jpg') no-repeat center;
        background-size: cover;
    }
    .head_phone_img{
        width:100%;
    }
    form input,
    form select{
        background: #eeeeee !important;
    }
    .dp{
        background:#eeeeee !important;
    }
    .bzxx{
        margin-top:65px;
    }
    .bzxx p{
        color:#8f4290;
        font-weight: bolder;
        font-size:15px;
    }
    .bzxx  ul{
        padding-left:0px;
        margin-top: 10px;
    }
    .bzxx ul li{
        text-align:left;
        list-style: none;
    }
    .form-control:focus {
        border-color: #8f4290;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(143,66,144,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(143,66,144,.6);
    }
    @media (min-width:769px) {
        .container {
            padding-right: 0px;
            padding-left: 0px;
            margin-right: auto;
            margin-left: auto;
        }
        .zxyd{
            height: 125px;
            line-height: 125px;
            /* margin:0 auto; */
            font-size: 20px;
            font-weight:bolder;
        }
        .zxyd_left,
        .zxyd_right{
            width:195px;
            height:1px;
            background: #8f4290;
            display:inline-block;
            margin-bottom: 6px;
            margin-right: 15px;
        }
        .zxyd_right{
            margin-left: 15px;
        }
        .zysx{
            line-height: 20px;
        }
        .zysx p{
            font-weight: bolder;
            font-size:15px;
        }
        .bzxx  ul{
            padding-left:0px;
            margin-top: 45px;
        }
        form #nan{
            margin-right: 8px;
        }
    }
    @media (min-width: 1200px){
        .container {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
            width: 1200px;
        }
    }
    @media (max-width: 768px) {
        .zxyd_left,
        .zxyd_right{
            height:1px;
            background: #8f4290;
            margin-top: 9px;
        }
        .zysx{
            text-align: left;
        }
        form #kd_wrap span{
            margin-top: 3px;
            display: inline-block
        }
        form #nan{
            margin-right: 8px;
        }
        form #nan span,
        form #nv span{
            margin-top: 3px;
            display: inline-block;
        }
        .bzxx p{
            color:#8f4290;
            font-weight: normal;
        }
        #btn_left{
            float: left;
        }
        #btn_right{
            float: right;
        }
    }
</style>